import React from "react";
import {
  addHoverEvent,
  standardFeatureBrief,
  usesFeatureBrief,
} from "./geom/hoverlib";
import amusementLayer from "./geom/layers/amusementLayer";
import buyLayer from "./geom/layers/buyLayer";
import carLayer from "./geom/layers/carLayer";
import eatingLayer from "./geom/layers/eatingLayer";
import houseLayer from "./geom/layers/houseLayer";
import playLayer from "./geom/layers/playLayer";
import queryLayer from "./geom/layers/queryLayer";
import routeLayer from "./geom/layers/routeLayer";
import smokeLayer from "./geom/layers/smokeLayer";
import ticketLayer from "./geom/layers/ticketLayer";
import wcLayer from "./geom/layers/wcLayer";
import { addWMSLayer, getMainMap } from "./geom/MainMap";
import "./MapBuilder.css";
import conf from "./runtime/configuration";

export default class MapBuilder extends React.Component<{ className: string }> {
  componentDidMount() {
    if (!conf.use.disableMainMap) {
      for (const layerName of conf.layers) {
        addWMSLayer(conf.layersPrefix + layerName);
      }
      const map = getMainMap();
      map.addLayer(routeLayer);
      map.addLayer(wcLayer);
      map.addLayer(buyLayer);
      map.addLayer(carLayer);
      map.addLayer(eatingLayer);
      map.addLayer(houseLayer);
      map.addLayer(playLayer);
      map.addLayer(queryLayer);
      map.addLayer(smokeLayer);
      map.addLayer(ticketLayer);
      map.addLayer(amusementLayer);
      addHoverEvent();
      usesFeatureBrief(standardFeatureBrief);
    }
  }

  render() {
    if (conf.use.disableMainMap) {
      return (
        <div id="main-map" className={this.props.className}>
          <div style={{ fontSize: "10em", textAlign: "center" }}>地图</div>
        </div>
      );
    } else {
      return <div id="main-map" className={this.props.className}></div>;
    }
  }
}
